<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="searchList"
          size="small"
          label-width="140px"
        >
          <el-form-item label="服务开始时间:">
            <el-date-picker
              v-model="searchList.startTime"
              style="width: 203px"
              type="datetime"
              placeholder="选择日期时间"
              clearable
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="服务结束时间:">
            <el-date-picker
              v-model="searchList.endTime"
              style="width: 203px"
              type="datetime"
              placeholder="选择日期时间"
              clearable
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="服务标签:">
            <el-select
              style="width: 203px"
              v-model="searchList.labelId"
              placeholder="请选择服务标签"
              clearable
            >
              <el-option
                v-for="(item, index) in serviceNameOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="地址:">
            <el-input
              style="width: 203px"
              v-model="searchList.address"
              placeholder="请输入要搜索的地址"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <div style="margin-top: 15px" class="table-container">
        <el-table
          :data="customerDemandList"
          style="width: 100%"
          v-loading="listLoading"
          border
        >
          <el-table-column label="订单编号" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column label="地址" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.address }}</template>
          </el-table-column>
          <el-table-column label="需求" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.demand }}</template>
          </el-table-column>
          <el-table-column label="客户ID" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.userId }}</template>
          </el-table-column>
          <el-table-column label="服务标签ID" width="150" align="center">
            <template slot-scope="scope">{{
              getServiceName(scope.row.labelId)
            }}</template>
          </el-table-column>
          <el-table-column label="服务标签" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.labelName }}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column label="联系电话" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.phone }}</template>
          </el-table-column>
          <el-table-column label="要求人数" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.person }}</template>
          </el-table-column>
          <el-table-column label="金额" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column label="客户名" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="约定时间" width="150" align="center">
            <template slot-scope="scope">{{ scope.row.time }}</template>
          </el-table-column>

          <el-table-column label="状态" width="150" align="center">
            <!-- CANCEL 已取消 -->
            <!-- WAIT 待接单 -->
            <!-- ACCEPT 已接单-->
            <template slot-scope="scope">
              <!-- {{ scope.row.status }} -->
              <el-tag type="primary" v-if="scope.row.status == 'CANCEL'"
                >已取消</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == 'WAIT'"
                >待接单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == 'ACCEPT'"
                >已接单</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 咨询按钮 -->
              <!-- <el-button size="mini" type="warning">咨询 </el-button> -->

              <!-- 状态修改按钮 -->
              <el-button
                size="mini"
                type="primary"
                @click="takeOrder(scope.row)"
                v-if="scope.row.status == 'WAIT'"
                >接单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-count="pageCunt"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import logo from "../../assets/fzu.jpg";
// import info from "../../assets/info.png";
// import Cookie from "js-cookie";
export default {
  name: "customerDemand",
  data() {
    return {
      // url: info,
      // src: logo,
      // activeIndex: "/",
      addressOptions: [],

      searchList: {
        address: "",
        endTime: "",
        labelId: "",
        startTime: "",
        pageNum: "1",
        pageSize: "5",
      },
      currentPage: 1,
      currentDemandList: {
        pageNum: "1",
        pageSize: "5",
      },
      customerDemandList: [
        {
          address: "",
          demand: "",
          userId: "",
          labelId: "",
          createTime: "",
          phone: "",
          person: "",
          price: "",
          name: "",
          id: "",
          time: "",
          labelName: "",
          status: "",
        },
      ],
      serviceNameOptions: [{ name: "", id: "", status: "" }],
      listLoading: false,
      pageCunt: 1,
    };
  },
  created() {
    this.getList();
    this.getserviceNameOptions();
  },
  computed: {
    // 计算属性：将服务标签ID转换为对应的服务名称
    getServiceName() {
      return (labelId) => {
        const matchingService = this.serviceNameOptions.find(
          (service) => service.id == labelId
        );
        return matchingService ? matchingService.name : "";
      };
    },
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.axios
        .get("/api/company/auth/demand/list", {
          params: this.currentDemandList,
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.customerDemandList = response.data.value.data;
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            // this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 换页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentOrderList.pageNum = val;
      this.axios
        .get("/api/company/auth/demand/list", {
          params: this.currentDemandList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.customerDemandList = response.data.value.data;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    getserviceNameOptions() {
      this.axios
        .get("api/company/auth/label/list")
        .then((response) => {
          if (response.data.code == "200") {
            // this.ServiceList = response.data.value.data;
            this.serviceNameOptions = response.data.value;
            this.serviceNameOptions = this.serviceNameOptions.filter(function (
              item
            ) {
              if (item.status == "NORMAL") return item;
            });
          }
        })
        .catch((error) => {
          this.message.error("无法获取数据");
        });
    },
    handleSearchList() {
      // 根据搜索条件搜索
      // ...
      this.listLoading = true;
      this.axios
        .get("/api/company/auth/demand/list", {
          params: this.searchList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.customerDemandList = response.data.value.data;
            var pcnt = response.data.value.total / 5;
            if (pcnt > Number.parseInt(pcnt)) {
              this.pageCunt = Number.parseInt(pcnt) + 1;
            } else {
              this.pageCunt = Number.parseInt(pcnt);
            }
            // this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 重置搜索条件
    handleResetSearch() {
      this.searchList = {
        address: "",
        endTime: "",
        labelId: "",
        startTime: "",
      };
    },
    // consultCustomers() {
    //   // 打开聊天室
    //   // ...
    //   this.$router.push({name:'chat-room'})

    // },
    takeOrder(row) {
      // 接单
      this.$confirm("请再次确认是否接单").then(() => {
        this.axios
          .get("/api/company/auth/demand/order?id=" + row.id)
          .then((response) => {
            if (response.data.code == "200") {
              this.$message({
                message: "已接单",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("接单失败");
          });
      });
    },
  },
};
</script>
<!-- <style lang="less" scope>
header.el-header {
  padding: 0px;
}

.header-container {
  font-family: "微软雅黑";
  padding: 0 20px;
  background-color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .text {
    color: #ffff;
    font-size: 14px;
    margin-left: 10px;
  }

  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .l-content {
    display: flex;
    align-items: center;

    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        //font-weight: bold;
        &.is-link {
          color: #303133;
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #97a8be;
        }
      }
    }
  }
}
</style> -->
